/*
 * @Title: 团购活动
 * @Created by: ycq
 */
<template>
	<view class="crew">
		<Banner />
		<comHeader :midTapHandle='toChooseCity' :config="navConfig"/>
	<!-- 	<view class='head' >
			<view class="head-title">
				<text>沈阳团购</text>
				<image src="/static/pos-home.png" mode=""></image>
				
			</view>
			<view class="head-img" @click="back">
				<image src="/static/fanhui.png" mode=""></image>
			</view>
		</view> -->
		<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
		<!-- <view class="home-nav" style="margin-top: -6vh;"> -->
		<view class="home-nav" >
			<view class="dot-main">
				<view :class="['dot-item',current==index-1?'active':'']" v-for="index in menuPage" :key="index"></view>
			</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
		<view class="home-nav">
			<view class="dot-main">
				<view :class="['dot-item',current==index-1?'active':'']" v-for="index in menuPage" :key="index"></view>
			</view>
		<!-- #endif -->
		
			<swiper class="swiper"  :indicator-dots="false"  :interval="3000" :duration="500" @change="change">
			    <swiper-item>
			        <view class="swiper-item" >
						<view class="nav-area">
							<view class="nav-item" v-if="index<4" v-for="(item,index) in navData1" :key="index"  @click='toPage(item.url)'>
								<image :src="item.img" alt=""></image>
								<span >{{item.name}}</span>
							</view>
						</view>
			        </view>
			    </swiper-item>
				 <swiper-item>
				    <view class="swiper-item" >
						<view class="nav-area">
							<view class="nav-item" v-if="index>3"  v-for="(item,index) in navData1" :key="index"  @click='toPage(item.url)'>
								<image :src="item.img" alt=""></image>
								<span >{{item.name}}</span>
							</view>
						</view>
				    </view>
				</swiper-item>
			</swiper>
		</view> 
		<view class="hd-list">
			<view class="hd-item" v-for="(item,index) in hdData" :key='index' @click="toDetail(item.type)">
				<image :src="item.img"></image>
				<view class="item-fen"  v-if="item.fen!=null">{{item.fen}}分</view>
				<view class="item-right">
					<view class="item-title" >
						<text class="title-text">{{item.name}}</text>
					</view>
					<text class="tip">{{item.tip}}</text>
					<text class="des">{{item.des}}</text>
					
					<view class="price-buy" style="">
						<text class="sell">已售{{item.sell}}</text>
						<text class="price" >￥{{item.price}}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="more">期待更多推荐</view>
		<FootMenu navIndex='3'/>
		<top-view></top-view>
	</view>
</template>

<script>
	import Banner from '@/components/banner.vue'
	export default{
		data(){
			return{
				menuPage:2,
				current: 0,
				navConfig:{
					isFixed:false,
					comScroll:200,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:true,
						text:'沈阳团购',
						textColor: '#ffffff',
						isShowIco:true,
						ico:'location',
						icoColor:'#ffffff'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				navData1:[
					{
						name:'酒店',
						img:'/static/hd-t-jd.png',
						url:''
					},
					{
						name:'美食',
						img:'/static/hd-t-ms.png',
						url:''
					},
					{
						name:'旅游',
						img:'/static/hd-t-ly.png',
						url:''
					},
					{
						name:'特价机票',
						img:'/static/hd-t-tjjp.png',
						url:''
					},
					{
						name:'海外购',
						img:'/static/hd-t-hwg.png',
						url:''
					},
					{
						name:'美食',
						img:'/static/hd-t-ms.png',
						url:''
					},
					{
						name:'旅游',
						img:'/static/hd-t-ly.png',
						url:''
					},
					
				],
				hdData:[
					{
						name:'绿地铂锐酒店',
						des:'冰峪旅游度假区被誉为“辽南桂林”冰（简单介绍）...庄河市北40余...',
						price:298,
						img:'/static/banner.png',
						tip:'标准间',
						sell:2888,
						type:1,
						fen:4.1,
					},
					{
						name:'鞍山玉佛苑',
						des:'鞍山玉佛苑玉佛苑风景区鞍山玉佛苑是国家首批AAAA级旅游景区，位于辽...',
						price:198,
						img:'/static/banner.png',
						tip:'宗教寺庙',
						sell:2888,
						type:2,
						fen:null,
					},
					{
						name:'桓仁五女山风景区 (4A)',
						des:'世界文化遗产五女山位于桓仁满族自治（简单介绍）...',
						price:199,
						img:'/static/banner.png',
						tip:'宗教寺庙',
						sell:2888,
						type:2,
						fen:null,
					},
					{
						name:'自助餐',
						des:'鞍山玉佛苑是国家首批4A级旅游景区（简单介绍）... ',
						price:298,
						img:'/static/banner.png',
						tip:'免费小吃',
						sell:2888,
						type:3,
						fen:null,
					},
					
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			toDetail(type){
				switch (type){
					case 1:
					uni.navigateTo({
						url:'hdHotelDetail'
					})
						break;
					default:
						break;
				}
			},
			toChooseCity(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/citySelect'
				})
			}
		},
		created(){
			
		},
		components: {
			Banner
		},
	}
</script>

<style scoped>
	.crew{
		width: 750upx;
		height: auto;
		display: table;
		margin-bottom: 110upx;
	}
	.head{
		position: absolute;
		top:50upx;
		height: 70upx;
		width: 750upx;
	}
	.head-img{
		width:80upx;
		height: 70upx;
		position: absolute;
	}
	.head-img image{
		width:30upx;
		height: 30upx;
		margin-top: 20upx;
		margin-left: 28upx;
	}
	.head-title{
		width:750upx;
		height: 70upx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.head-title text{
		font-size: 32upx;
		line-height: 70upx;
		color: #FFFFFF;
		margin-right: 20upx;
	}
	.head-title image{
		width:30upx;
		height: 30upx;
		margin-top: 20upx;
		
	}
	.home-nav{
		width: 90%;
		height: 229upx;
		margin-left: 5%;
		margin-top: -2vh;
		background: #ffffff;
		border-radius: 15px;
		z-index: 20;
		padding-top: 2vh;
		position: absolute;
	}
	.nav-area{
		width: 90%;
		margin-left: 5%;
		height: 50%;
		display: flex;
		flex-wrap:wrap;
		flex-direction:row;
	}
	.nav-item{
		width: 25%;
		margin-top: 20upx;
		padding: 2upx 0;
		text-align: center;
	}
	.nav-item image{
		width: 80upx;
		height:80upx;
	}
	.nav-item span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 3vw;
	}
	.more{
		float: right;
		font-size: 30upx;
		padding-top: 10upx;
		color: #888888;
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.swiper-item img{
		width: 100%;
		height: 100%;
	}
	.dot-main {
		width: 100%;
		height: 8upx;
		display: flex;
		margin-top: 170upx;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 40upx;
		height: 12upx;
		border-radius: 25px;
		background: rgba(0,0,0,0.3);
		margin: 0 0.5%;
		box-sizing: border-box;
	}
	.active {
		background: #568cfe;
	}
	
	
	.hd-list{
		width: 700upx;
		margin-left: auto;
		margin-top: 220upx;
		margin-right: auto;
		display: table;
		height: auto;
	}
	.hd-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.hd-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.hd-item:nth-child(1),.hd-item:last-child{
		height: 652upx;
	}
	.hd-item:nth-child(1) image,.hd-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 430upx; 
	}
	.hd-item:nth-child(1) .item-fen,.hd-item:last-child .item-fen{
		top: 400upx;
	}
	.hd-item .item-fen{
		width: 68upx;
		height: 30upx;
		background: rgba(0,0,0,0.5);
		color: #FFFFFF;
		font-size: 24upx;
		position: absolute;
		right: 0;
		text-align: center;
		top: 449upx;
		line-height: 30upx;
	}
	.hd-item{
		height: 700upx;
		position: relative;
	}
	.hd-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 479upx;
	}
	.item-right{
		width: 340upx;
		height: 182upx;
		float: right;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.title-text{
		font-size: 30upx;
		width: 100%;
		float: left;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-left: 20upx;
		overflow: hidden;
	}
	
	.des{
		width: 300upx;
		font-size: 25upx;
		color: #666666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-left: 20upx;
		overflow: hidden;
	}
	
	.tip{
		font-size: 28upx;
		color: #FF7C04;
		width: 320upx;
		margin-left: 20upx;
		display: block;
	}
	.price-buy{
		width:320upx;
		height: 46upx; 
		display:flex ;
		flex-direction: row;
		justify-content:space-between;
		margin-left: 20upx;
		margin-top: 10upx;
	}
	.price{
		font-size: 28upx;
		color: #2A99F8;
		margin-top: 5upx;
	}
	.sell{
		color: #999999;
		font-size: 26upx;
		line-height: 50upx;
	}
	.more{
		width: 750upx;
		height: 60upx;
		margin-top: 40upx;
		font-size: 30upx;
		color: #D0D0D0;
		text-align: center;
		line-height: 60upx;
	}
</style>
